<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #info{
            width: 300px;
            height: 400px;
            background-color: #bfa;
            overflow: auto;
        }
    </style>
    <script>
        window.onload = function () {

            /*
                当协议的滚动条拖动到底时，使多选框可用，当多选框选中时，使提交按钮可用
             */
            // 获取info
            var info = document.getElementById('info');
            // 获取ck input
            var ck = document.getElementById('ck');
            // 获取注册按钮
            var re = document.getElementById('re');

            // scroll事件会在元素的滚动条滚动时触发
            info.onscroll = function () {

                // console.log(Math.round(info.scrollHeight - info.scrollTop), info.clientHeight);

                // 检查垂直滚动条是否滚动到底
                if(Math.round(info.scrollHeight - info.scrollTop) === info.clientHeight){
                    // 等式满足证明滚动条滚动到底，滚动到底说明用户已经阅读完协议
                    // 使多选框可用，表单项的disabled属性用来设置元素是否禁用
                    // 如果设置true，则表示禁用元素，设置为false则表示启用元素
                    ck.disabled = false;
                }

            };


            // 接收协议后，使注册按钮可用
            ck.onclick = function () {
                // 使注册按钮可用
                re.disabled = !ck.checked;
            };

        };

    </script>
</head>
<body>

<h2>欢迎用户注册，请仔细阅读以下协议：</h2>
<p id="info">
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
    亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
</p>
<input id="ck" type="checkbox" disabled> 我已仔细阅读，并遵守以上协议
<input id="re" type="button" value="注册" disabled>

</body>
</html>